<template name="shopStar">
	<view>
		<view class="starBox">
			<block v-for="(index) in zhengshu" :key="index">
				<view class="starItem active">
					<text class="iconfont icon-wujiaoxingxingxingshoucang "></text>
				</view>
			</block>
			<!-- 获取小数部分 -->
			<block v-if="((5-star)%1) !=0 ">
			<view class="starItem xiaozhu">
				<text class="iconfont icon-wujiaoxingxingxingshoucang "></text>
				<view class="xsBg" :style="{'width':xiaoshu*100+'%'}"></view>
			</view>
			</block>
			<block v-if="yushu>0">
				<view class="starItem" v-for="(index) in yushu" :key="index">
					<text class="iconfont icon-wujiaoxingxingxingshoucang "></text>
				</view>
			</block>
			
			
			<text v-text="star.toFixed(1)"></text>
		</view>
	</view>
</template>

<script>
	export default{	
		name:'shopStar',		//组件名称
		// 传递参数
		props:{
			star:{
				type:Number,
				default:5.0
			}
		},
		// 组件参数
		data(){
			return {
				zhengshu:0,
				xiaoshu:0,
				yushu: 0
			}
		},
		// 组件方法
		methods:{
			mtd1(){
				
			}
		},
		created() {
			setTimeout(()=>{
				this.zhengshu=parseInt(Math.floor(this.star));
				this.xiaoshu=this.star%1
				this.yushu=5- Math.ceil(parseFloat(this.star))
			},200)
		}
	}
</script>

<style lang="less" scoped>
	// @import "../../common/public.less";
	
	.starBox {
		display: flex;
		align-items: center;
		margin-top: 24upx;
		.starItem {
			width: 40upx;
			height: 40upx;
			border-radius: 6upx;
			background-color: #b8b8b8;
			margin-right: 10upx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;
	
			text {
				color: #FFFFFF;
				line-height: 40upx;
	
			}
			
		}
		
		
		.xiaozhu{
			position: relative;
			.xsBg{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				background-color:#ffac26;
				z-index: 1;
			}
			text{
				position: relative;
				z-index: 9;
			}
		}
		>text {
			font-size: 30rpx;
			font-weight: bold;
			color: #90959b;
		}
		.active{
			background-color: #ffac26!important;
		}
	}
</style>
